<template>
  <div>
    <div>
      <van-nav-bar @click-left="$router.push('/mine')" title="个人信息">
        <template #left>
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </template>
      </van-nav-bar>
      <ul>
        <li>
          <van-cell is-link title="头像" @click="show1 = true">
            <template #default>
              <img :src="list.avatar" alt="" />
            </template>
          </van-cell>
          <van-action-sheet v-model="show1" @select="onSelect" @open="onopen">
            <template #default>
              <ul>
                <li class="q2">
                  拍照
                  <input type="file" accept="image/*" @change="clickUpload" />
                </li>
                <li class="q2">
                  从手机相册选择
                  <input type="file" accept="image/*" @change="clickUpload" />
                </li>
                <li class="q2" @click="show1 = false">取消</li>
              </ul>
            </template>
          </van-action-sheet>
        </li>
        <li>
          <van-cell is-link title="昵称" @click="push1(list)">
            <template #default>
              <p>{{ list.nickname }}</p>
            </template>
          </van-cell>
        </li>
        <li>
          <p>手机号</p>
          <p>{{ list.mobile }}</p>
        </li>
        <li>
          <van-cell is-link title="性别" @click="push2(list)">
            <template #default>
              <p>{{ list.sex == 0 ? "男" : "女" }}</p>
            </template>
          </van-cell>
        </li>
        <li>
          <van-cell is-link title="出生日期" @click="show2 = true">
            <template #default>
              <p>{{ list.birthday }}</p>
            </template>
          </van-cell>
          <van-action-sheet v-model="show2" @select="onSelect" @open="onopen">
            <template #default>
              <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                @cancel="show = false"
                @confirm="confirm(list)"
              />
            </template>
          </van-action-sheet>
        </li>
        <li>
          <van-cell is-link title="所在城市" @click="show3 = true">
            <template #default>
              <p>
                {{ list.province_name }},{{ list.city_name }},{{
                  list.district_name
                }}
              </p>
            </template>
          </van-cell>
          <van-action-sheet v-model="show3" @select="onSelect" @open="onopen">
            <template #default>
              <van-area
                value="110101"
                @cancel="show = false"
                @confirm="confirm1"
                :area-list="areaList"
              />
            </template>
          </van-action-sheet>
        </li>
        <li>
          <p>学科</p>
          <p></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import { userInfo, getuser, publicimg } from "../../request/http";
export default {
  data() {
    return {
      list: [],
      show1: false,
      show2: false,
      show3: false,
      currentDate: "",
      areaList: areaList,
      fileList: [],
      fileList1: [],
    };
  },
  methods: {
    confirm() {
      console.log(this.currentDate);
      getuser({ birthday: this.currentDate }).then((res) => {
        console.log(res);
        Toast.success("修改成功");
        this.show2 = false;
        userInfo().then((res) => {
          console.log(res);
          this.list = res.data;
        });
      });
    },
    confirm1(v) {
      console.log(v);
      getuser({province_id:v[0].code,city_id:v[1].code,district_id:v[2].code}).then((res) => {
        console.log(res);
        Toast.success("修改成功");
          this.show3 = false;
        userInfo().then((res) => {
          console.log(res);
          this.list = res.data;
        });
      });
    },
    push1(v) {
      console.log(v);
      this.$router.push({
        path: "/setinfo",
        query: { nickname: v.nickname },
      });
    },
    push2(v) {
      console.log(v);
      this.$router.push({
        path: "/setinfo1",
        query: { sex: v.sex },
      });
    },
    clickUpload(e) {
      console.log(e.target.files[0]);
      const formData = new FormData();
      console.log(this.formData);
      formData.append("file", e.target.files[0]);
      // console.log(detail);
      // console.log(this.fileList);
      publicimg(formData).then((res) => {
        console.log(res);
        getuser({ avatar: res.data.path }).then((res) => {
          console.log(res);
          Toast.success("修改成功");
          this.show1 = false;
          userInfo().then((res) => {
            console.log(res);
            this.list = res.data;
          });
        });
      });
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      //   this.show = false;
      //   Toast(item.name);
    },
    onopen() {},
  },
  created() {
    userInfo().then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
  background: #fff;
  margin: 0.533rem 0;
  padding: 0 0.8rem;
  li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .q2 {
      width: 100vw;
      height: 100px;
      text-align: center;
      position: relative;
      display: inline-block;
    }
    img {
      width: 1.067rem;
      height: 1.067rem;
      border-radius: 50%;
      vertical-align: middle;
    }
    p {
      font-size: 0.4rem;
      color: #595959;
    }
  }
}
</style>